<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="top">
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">1</view>
                <text class="steps-text">实名信息</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line"/>
                <view class="steps">2</view>
                <text class="steps-text">绑定银行卡</text>
            </view>
            <view class="steps-wrap">
                <view class="steps-line" style="border-color: #cccccc"/>
                <view class="steps" style="background: #cccccc">3</view>
                <text class="steps-text" style="color: #cccccc">开户成功</text>
            </view>
        </view>
        <view class="bottom-one">
            <view class="input-wrap">
                <text class="input-key">开户行</text>
                <text @click="showBank(true)" class="bank-value"
                      :style="{color:bank=='请选择开户行'?'#7f7f7f':'#5e93c6'}">{{bank}}
                    </text>
            </view>
<!--            <text style="color:#7f7f7f">》</text>-->
            <view class="input-wrap">
                <text class="input-key">银行卡号</text>
                <input v-model="bankCard" type="number" maxlength="19" placeholder="请输入银行卡号"/>
            </view>
            <view class="input-wrap">
                <text class="input-key">预留手机号</text>
                <input v-model="phone" type="number" maxlength="11" placeholder="请输入预留手机号"/>
            </view>
        </view>
        <view  class="input-key" style="padding-left:3%;margin:20upx 0;font-size:28upx;line-height: 32upx">温馨提示:请确保手机号为对应储蓄卡的柜面预留手机号</view>
        <button type="warn" class="sub-button" @click="next">
            确定
        </button>
        <uni-popup :show="bankVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="选择银行">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="valueBank" @change="bankChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in banks" :key="index">{{item}}</view>
                </picker-view-column>
            </picker-view>
            <view class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="bankOk">
                确定
            </view>
            <view class="pick-button" @click="showBank(false)">
                取消
            </view>
            <view class="safety"/>
        </uni-popup>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    import uniPopup from "@/components/uni-popup/uni-popup.vue"
    export default {
        components: {uniPopup},
        data() {
            return {
                width: uni.getSystemInfoSync().windowWidth,
                bankVisible:false,
                height: '',
                name:'',
                idCard:'',
                banks:['中国工商银行'],
                bank:'中国工商银行',//'请选择开户行',
                bankTemp:'',
                valueBank:[],
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
                bankCard:'',
                phone:'',
            }
        },
        onLoad() {
            this.bankTemp=this.banks[0]
            uni.getSystemInfo('windowHeight').then(r => {
                this.height = r[1].windowHeight
            })
        },
        methods: {
            next(){
                if(this.bank=='请选择开户行'){
                    uni.showModal({
                        title: '提示',
                        content: '请选择开户行',
                        showCancel: false,
                    });
                }else if(!this.bankCard){
                    uni.showModal({
                        title: '提示',
                        content: '请输入银行卡号',
                        showCancel: false,
                    });
                }else if(!(/^1[3456789]\d{9}$/.test(this.phone))){
                    uni.showModal({
                        title: '提示',
                        content: '请输入正确的手机号',
                        showCancel: false,
                    });
                }else{
                    let stepsData=JSON.parse(uni.getStorageSync('stepsData'));
                    stepsData.bindCard=this.bankCard
                    stepsData.mobile=this.phone
                    API.bankAccountOpen(stepsData).then(res=>{
                        if(res.status==200){
                            if(res.data.returnCode==0){
                                uni.setStorage({
                                    key: 'stepsData',
                                    data: JSON.stringify(stepsData),
                                    success: function () {
                                        setTimeout(()=>{
                                            uni.navigateTo({
                                                url: '../steps/index5'
                                            });
                                        },4000)
                                    }
                                });
                                uni.showModal({
                                    title: '提示',
                                    content: res.data.smsSendNo,
                                    showCancel: false,
                                });
                            }else{
                                uni.showModal({
                                    title: '提示',
                                    content: res.data.returnMsg,
                                    showCancel: false,
                                });
                            }
                        }else{
                            uni.showModal({
                                title: '提示',
                                content: '请求失败',
                                showCancel: false,
                            });
                        }

                    })
                }
            },
            showBank(flag){
                // if(flag&&this.bank=='请选择开户行'){
                //     this.bank==this.banks[0]
                // }
                this.bankVisible=flag
            },
            bankChange(e){
                this.bankTemp=this.banks[e.detail.value[0]]
            },
            bankOk(){
                this.bank=this.bankTemp
                this.bankVisible=false
            },
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
    }

    .top {
        width: 100%;
        height: 95upx;
        background: white;
        display: flex;
        padding-top: 25upx;
        justify-content: space-around;
    }
    .steps-wrap{
        display:flex;
        flex-direction: column;
        align-items: center;
        width: 33.34%;
    }
    .steps-line{
        width: 33.34%;
        border-bottom: 2px solid #DC5C4B;
        position: absolute;
        margin-top: 25upx;
    }
    .steps {
        z-index:1;
        width: 50upx;
        height: 50upx;
        background: #DC5C4B;
        border-radius: 40upx;
        color: rgba(255, 255, 255, 1);
        font-size: 32upx;
        text-align: center;
        font-family: PingFangSC-regular;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .bottom-one{
        width: 100%;
        color: #647482;
        background: white;
        margin-top: 40upx;
        border-top: 1px solid rgba(227, 227, 227, 1);
    }
    .input-wrap{
        display: flex;
        justify-content: space-between;
        padding: 0 3%;
        border-bottom: 1px solid rgba(227, 227, 227, 1);
    }
    .input-key{
        font-size: 32upx;
        color: #64727f;
        line-height: 112upx;
    }
    input{
        padding:30upx 0;
        color: #5e93c6;
        font-size: 28upx;
        text-align: right;
        /*font-family: PingFangSC-regular;*/
        display: inline-block;
        min-width: 50%;
    }
    .pick-time{
        /*background: red;*/
    }
    .pick-button{
        display: inline-block;
        width: 50%;
        border-top:1px solid #E8E8E8;
        border-bottom:1px solid #E8E8E8;

    }
    .bank-value{
        font-size: 28upx;
        line-height: 112upx;
        margin-right: -2%;
    }

    .safety{
        width:100%;
        height: constant(safe-area-inset-bottom);
        height:env(safe-area-inset-bottom);
    }
</style>
